<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
            // console.log( $(".wrapper select option").eq().text() );

            //全部移动到右侧
            $("button").eq(0).click(function () {
                // var text =$("option").eq(index).text()
                //    console.log( $(".leftBox>option"));
                $(".leftBox>option").remove().appendTo(".rightBox").prop("selected", false)
            })
            // 全部移动到左侧
            $("button").eq(1).click(function () {
                $(".rightBox>option").remove().appendTo(".leftBox").prop("selected", false)
            })
            // 单个移动右侧
            $("button").eq(2).click(function () {
                console.log($(":selected"));
                $(":selected").remove().appendTo(".rightBox").prop("selected", false)
            })
            // 单个移动到左侧
            $("button").eq(3).click(function () {
                console.log($(":selected"));
                $(":selected").remove().appendTo(".leftBox").prop("selected", false)
            })
        })
    </script>
</head>

<body>
    <div class="wrapper">

        <select class="leftBox" multiple style="height:300px; width: 100px; background-color:pink;" size="4">
            <option value="1">11</option>
            <option value="1">22</option>
            <option value="1">33</option>
            <option value="1">44</option>
            <option value="1">55</option>
        </select>

        <button> ＞＞＞ </button>
        <button> ＜＜＜ </button>
        <button> ＞ </button>
        <button> ＜ </button>

        <select multiple class="rightBox" style="height:300px; width: 100px;  background-color:pink;" size="4">
        </select>
    </div>
</body>

</html>
